<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>店铺新增页面</title>
    <script type="text/javascript" src="/bsc/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/bsc/static/common/bootstrap/js/bootstrap/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/bsc/static/common/bootstrap/js/bootstrap/css/bootstrap.min.css" >
	<script type="text/javascript" src="/bsc/static/common/bootstrapvaildator/js/bootstrapValidator.min.js"></script>
	<script type="text/javascript" src="/bsc/static/common/bootstrapvaildator/js/language/zh_CN.js"></script>
<script type="text/javascript">
  function op(){
	  document.forms[0].action="/bsc/shop/re";
	  document.forms[0].submit();
  }
  
</script>
</head>
<body style="margin: 30px;">
   <div class="container">
   <center>
    <form method="post" action="" name="form" enctype="multipart/form-data" id="form">
<table  class="table table-bordered">
<tr>
<td align="center">
	<div class="form-group">
<label for="shop_user_id">店主账号:</label>
</div>
</td>
<td>
<div class="form-group">
<select class="form-control" name="bsu.shop_user_id" id="shop_user_id">
<c:forEach items="${list }" var="user" >
  <option value="${user.shop_user_id }">${user.account }</option>
 </c:forEach>
</select>
</div>
</td>
<td align="center">
	<div class="form-group">
<label for="show_status">状态:</label>
</div>
</td>
<td>
<div class="form-group">
<select name="show_status" id="show_status" class="form-control">
<option value="-1">请选择</option>
<option value="0">停用</option>
<option value="1">启用</option>  
</select>
</div>
</td>
</tr>

<tr>
<td align="center">
	<div class="form-group">
<label for="shop_name">店铺名称:</label>
</div>
</td>
<td>
 <div class="form-group">
<input type="text" name="shop_name" id="shop_name" class="form-control">
</div>
</td>
<td align="center">
	<div class="form-group">
<label for="short_name">店铺简称:</label>
</div>
</td>
<td>
 <div class="form-group">
<input type="text" name="short_name"  id="short_name" class="form-control">
</div>
</td>
</tr>
<tr>
<td align="center">
	<div class="form-group">
<label for="file">封面图片:</label>
</div>
</td>
<td>
 <div class="form-group">
 <div id="imgPreview"></div>
<input type="file" name="file" id="file" class="form-control" onchange="PreviewImage(this)">
</div>
</td>
<td align="center">
	<div class="form-group">
<label for="shop_license">营业执照号:</label>
</div>
</td>
<td>
 <div class="form-group">
<input type="text" name="shop_license" id="shop_license"  class="form-control">
</div>
</td>
</tr>
<tr>
<td align="center">
	<div class="form-group">
<label for="shop_area">店铺面积:</label>
</div>
</td>
<td>
 <div class="form-group">
<input type="text" name="shop_area" id="shop_area" class="form-control">
</div>
</td>
<td align="center">
	<div class="form-group">
<label for="shop_project">主营项目:</label>
</div>
</td>
<td>
 <div class="form-group">
<input type="text" name="shop_project" id="shop_project" class="form-control">
</div>
</td>
</tr>
<tr>
<td align="center">
	<div class="form-group">
<label for="shop_phone">店铺电话:</label>
</div>
</td>
<td>
 <div class="form-group">
<input type="text" name="shop_phone" id="shop_phone" class="form-control">
</div>
</td>
<td align="center">
	<div class="form-group">
<label for="shop_address">店铺地址:</label>
</div>
</td>
<td>
 <div class="form-group">
<input type="text" name="shop_address" id="shop_address" class="form-control">
</div>
</td>
</tr>
<tr>
<td align="center">
	<div class="form-group">
<label for="month_cash_in">月目标现金收入:</label>
</div>
</td>
<td>
 <div class="form-group">
<input type="text" name="month_cash_in" id="month_cash_in" class="form-control">
</div>
</td>
<td align="center">
	<div class="form-group">
<label for="month_expend_in">月目标消耗收入:</label>
</div>
</td>
<td>
 <div class="form-group">
<input type="text" name="month_expend_in" id="month_expend_in" class="form-control">
</div>
</td>

</tr>
</table>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="op()">返回</button>
<button type="button" class="btn btn-primary" name="zjjpreserve" id="zjjpreserve">保存</button>
</div>
</form>
</center>
   </div>
</body>
<script type="text/javascript">
//开始表单验证
var form = $('#form');
$(document).ready(function() {
	form.bootstrapValidator({
		message: '输入值不合法',
		feedbackIcons: {
			valid: 'glyphicon glyphicon-ok',
			invalid: 'glyphicon glyphicon-remove',
			validating: 'glyphicon glyphicon-refresh'
		},
		fields: {
			show_status: {
				validators : {
					notEmpty : {//检测非空,radio也可用  
						message : '角色不能为空'
					},
					callback : {
						message : '必须选择一个状态',
						callback : function(value, validator) {

							if (value == -1) {
								return false;
							} else {
								return true;
							}
						}
					}
				}
			},
			shop_name: {
				message: '店铺名称不合法',
				validators: {
					notEmpty: {
						message: '店铺名称不能为空'
					},
					stringLength: {
						min: 2,
						max: 6,
						message: '请输入2到6个字符'
					}
					
				}
			},
			file: {
                validators: {
                    notEmpty: {
                        message: '上传图片不能为空'
                    },
                    file: {
                        extension: 'png,jpg,jpeg',
                        type: 'image/png,image/jpg,image/jpeg',
                        message: '请重新选择图片'
                    }
                }
            },
            shop_license: {
				message: '营业执照不合法',
				validators: {
					notEmpty: {
						message: '营业执照不能为空'
					},
					stringLength: {
						min: 13,
						max: 13,
						message: '请输入13位数'
					},
					regexp: {
						regexp: /^[0-9]*$/,
						message: '只能由数字组成'
					}
				}
			}, 
			shop_phone: {
				message: '手机号不合法',
				validators: {
					notEmpty: {
						message: '手机号不能为空'
					},
					stringLength: {
						min: 11,
						max: 11,
						message: '请输入11位数'
					},
					regexp: {
						regexp: /^[0-9]*$/,
						message: '只能由数字组成'
					}
				}
			}, 
			shop_address: {
				message: '地址不合法',
				validators: {
					notEmpty: {
						message: '地址不能为空'
					},
					stringLength: {
						min: 6,
						max: 8,
						message: '至少6到8位字符'
					},
					regexp: {
						regexp: /^[\u4e00-\u9fa5]{0,}$/,
						message: '只能由汉字组成'
					}
				}
			}, 
		}
	});
	
	//点击保存按钮进行 表单验证 
	//验证成功 提交表单 刷新界面
	$("#zjjpreserve").click(
		function() {
			console.log("---");
			//进行表单验证
			var bv = form.data('bootstrapValidator');
			bv.validate();
			if(bv.isValid()) {
				document.forms[0].action="/bsc/shop/insertshop";
				document.forms[0].submit();
			}
		}		
	);
	
});
//表单验证结束
function PreviewImage(imgFile) {
	          var path = window.URL.createObjectURL(imgFile.files[0]);
	          document.getElementById("imgPreview").innerHTML = "<img id='img1' width='80px' height='80px' src='" + path + "'/>";
	}

</script>
</html>